<template>
  <div class="w-full flex flex-wrap items-center searchbox">
    <div
      class="items"
      v-for="(item, index) in queryForm"
      :key="index"
      :class="index < showSearchCondition ? '' : 'hidden'"
    >
      <div v-if="index < showSearchCondition">
        <div
          class="flex items-center rounded-[10px] px-[20px] bg-[#fff] py-[7px] box"
          v-style="`width:${item.width || 280}px`"
          v-if="item.type === 'input'"
        >
          <div class="text-[14px] text-[#999] shrink-0 label">{{ item.label }}</div>
          <div class="text-[14px] w-full val">
            <el-input
              v-model="formValue[item.code]"
              :placeholder="`${ item.placeholder || `请输入${item.placeHolder ? item.placeHolder : item.label}`  }`"
              clearable
              @clear="clearItems"
              @change="onChange(item)"
            />
          </div>
        </div>

        <div
          class="flex items-center rounded-[10px] px-[20px] bg-[#fff] py-[7px] box"
          v-style="`width:${item.width || 280}px`"
          v-if="item.type === 'select'"
        >
          <div class="text-[14px] text-[#999] shrink-0 label">{{ item.label }}</div>
          <div class="text-[14px] w-full val">
            <el-select
              v-model="formValue[item.code]"
              :placeholder="`${ item.placeHolder || `请选择${item.placeHolder ? item.placeHolder : item.label}` }`"
              class="custom-select"
              clearable
              filterable
              @clear="clearItems"
              @change="onChange(item)"
            >
              <el-option
                v-for="option in item.options"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              />
            </el-select>
          </div>
        </div>

        <div
          class="flex items-center rounded-[10px] px-[20px] bg-[#fff] box py-[7px] dateRange"
          v-style="`width:${item.width || 380}px`"
          v-if="item.type === 'dateRange'"
        >
          <div class="text-[14px] text-[#999] shrink-0 label">{{ item.label }}</div>
          <div class="text-[14px] w-full val">
            <el-date-picker
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              v-model="formValue[item.code]"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              class="w-full"
              prefix-icon="none"
              clearable
              @clear="clearItems"
              @change="onChange(item)"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="flex items-center btnbox">
      <div
        class="text-[#3721FF] cursor-pointer"
        @click="openBox"
        v-if="showExpland && showSearchCondition === 3"
      >
        展开
        <Icon :size="12" icon="ep:arrow-down" />
      </div>
      <div
        class="text-[#3721FF] cursor-pointer"
        @click="closeBox"
        v-if="showExpland && showSearchCondition > 3"
      >
        收起查询 <Icon :size="12" icon="ep:arrow-up"
      /></div>

      <el-button
        class="ml-15px py-[6px]"
        style="border-radius: 60px"
        color="#3721FF"
        @click="search"
      >
        {{ queryBtnText }}
      </el-button>
      <el-button
        class="ml-15px"
        style="border-radius: 60px; border: 1px solid #3721ff; color: #3721ff"
        v-if="showExport"
      >
        导出报表
      </el-button>
      <el-button
        class="ml-15px"
        Icon="Clear"
        style="color: #999"
        color="#fff"
        @click="clearItemsAll"
      >
        <div class="mr-5px iconbox">
          <img class="w-full h-full object-contain" :src="ClearIcon" alt="" />
        </div>
        清除条件
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { TradeOrderQueryVO } from '@/api/mall/trade/order'
import ClearIcon from '@/assets/mall/trade/order/clear.png'

const emit = defineEmits(['query','change'])

// 根据 queryForm 动态生成 formValue

const props = withDefaults(
  defineProps<{
    queryForm: TradeOrderQueryVO[] // 使用 TradeOrderQueryVO 类型
    showLen?: number
    showExpland: boolean
    showExport?: boolean
    hightMode?: 1 | 2 // 1为高模式，2为普高模式
    queryBtnText?: string
  }>(),
  {
    showLen: 3,
    showExpland: true,
    showExport: true,
    hightMode: 1,
    queryBtnText: '查询'
  }
)
// 初始化 formValue 为一个响应式对象
const formValue = ref<{ [key: string]: any }>({})

// 根据 queryForm 动态生成 formValue
const initializeFormValue = () => {
  props.queryForm.forEach((item) => {
    formValue.value[item.code] = item.type === 'dateRange' ? [] : ''
  })
}

const showSearchCondition = ref(props.showLen ?? 3)

const openBox = () => {
  showSearchCondition.value = props.queryForm.length
}
const closeBox = () => {
  showSearchCondition.value = 3
}
//单个清除后 重新获取formValue
const clearItems = () => {
  search()
}
// 点击清除条件按钮
const clearItemsAll = () => {
  initializeFormValue()
  search()
}

const onChange=(item)=>{
  emit('change',{
    item,
    form:formValue.value
  })
}

// 调用初始化函数
initializeFormValue()

// 方法：获取 formValue
const search = () => {
  // return { ...formValue.value }
  emit('query', { ...formValue.value })
}
</script>

<style lang="scss" scoped>
.searchbox {
  gap: 10px;
}
.box {
  border: 1px solid #e4e4e4;
  // min-width: 300px;
}
:deep(.el-button) {
  padding: 12px 30px !important;
  height: 45px !important;
}
:deep(.el-input__wrapper) {
  box-shadow: unset !important;
  width: 100%;
}
:deep(.el-select__wrapper) {
  box-shadow: unset !important;
  width: 100%;
  min-width: 200px;
}
:deep(.custom-select .el-select__suffix) {
  width: 20px;
}

:deep(.dateRange .el-range-separator) {
  position: relative;
}
.items {
  &.hidden {
    display: none;
  }
}
</style>
